
<template>
  <div class="main">
    <PureTableBar title="合同列表" class="list_hei">
      <template #buttons>
        <el-button type="primary" @click="ClickVdialog()">签订合同</el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive :loading="loading"
          size="small" :data="dataList" max-height="600" :columns="columns" :pagination="pagination"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :checkList="checkList" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <el-button type='primary' size="small" text @click="showDetail(row)"> 详情 </el-button>
          </template>
        </pure-table>
      </template>

    </PureTableBar>

    <ReDialog :width="1000" :height="500" :models="Vdialog" @Closes="ClosePanelVisible()">
      <template #main>
        <el-scrollbar height="420px">
          <p>购销合同：<span class="underline-text">{{ contract.contractNumber }}</span></p>
          <h2 style="text-align: center;">
            <el-select v-model="contract.purchaseOrderId" placeholder="请选择订单" @change="changeOrder()">
              <el-option v-for="item in orderList" :key="item.purchaseOrderId" :label="item.supplyName"
                :value="item.purchaseOrderId" />
            </el-select>
            购销合同
          </h2>
          <div class="contract">
            <div>
              <p> 甲方：<span class="underline-text">{{ contract.enterpriseName }}</span> </p>
              <p> 乙方：<span class="underline-text">{{ contract.supplierName }}</span> </p>
              <p> 本合同于 <span class="underline-text">{{ contract.year }}</span>年 <span class="underline-text">{{
                contract.month }}</span>月
                <span class="underline-text">{{ contract.day }}</span>日，由 (以下简称甲方)和 (以下简称乙方)，在经过友好协商后签订，双方共同遵守执行。
              </p>
            </div>
            <br />
            <h4> 第一条 乙方所提供的产品及费用清单</h4>
            <table style="margin-bottom: 20px;text-align: center;">
              <tr>
                <th style="width:150px">序号</th>
                <th style="width:150px">物品名称</th>
                <th style="width:100px">单位</th>
                <th style="width:200px">数量</th>
                <th style="width:150px">单价（元/件）</th>
                <th style="width:150px">金额（元）</th>
              </tr>
              <tbody>
                <tr v-for="(item, index) in contract.infoList">
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.ProductName }}</td>
                  <td>个</td>
                  <td>
                    {{ item.Quantity }}
                  </td>
                  <td>{{ item.Price }}</td>
                  <td>{{ item.total }}</td>
                </tr>
                <tr>
                  <td>合计（元）</td>
                  <td colspan="5">
                    {{ contract.totalMoney }}
                  </td>
                </tr>
                <tr>
                  <td>总金额（大写）</td>
                  <td colspan="5">
                    <el-input v-model="contract.totalText" @blur="handleInput" style="width:400px" />
                  </td>
                </tr>
              <!-- <tr>
                <td>说明</td>
                <td colspan="5">
                  <el-input placeholder="说明" show-word-limit type="textarea" />
                </td>
                                                                              </tr> -->
              </tbody>
            </table>
            <br />
            <h4> 第二条 包装：由乙方按国家标准进行包装。任何因包装不善所致之损失均由乙方负责。</h4>
            本合同项下具体的合同标的、数量、价格、付款方式、交付日期等交易内容由双方通过采购订单或买卖（销售、采购）合同等方式确定。
            <br />
            <h4> 第三条 交货日期：<span class="underline-text">{{ contract.deliveryDate }}</span></h4>
            <h4> 第四条 交货地点和方式</h4>
            1.交货地点：<span class="underline-text">{{ contract.deliveryAdree }}</span>
            <br />
            2.交货方式：乙方将货物运至甲方指定的目的地。乙方负责办理货物运至甲方指定的目的地，包括保险和储存在内的一切事项，有关费用已包括在合同总价中。
            <br />
            <h4>第五条 付款方式</h4>
            1.支付方式：<span class="underline-text">{{ contract.payMethod }}</span>
            <br />
            2、付款约定：<span class="underline-text">{{ contract.payAgreement }}</span>。甲方对乙方所提供的产品验收合格且完成支付后，乙方出具合同总价的全额销售发票。
            <br />
            <h4> 第六条 质量保证和售后服务</h4>
            1.乙方承诺所提供甲方的产品质量具有可追溯性，产品质量保证期为30天，自交付之日起计算。
            <br />
            2.在产品质量保证期内，如出现产品质量问题，甲方有权随时要求乙方免费维修或更换;如属甲方人员使用不当不能正常使用，乙方也应及时提供维修服务，但甲方应承担乙方人员的差旅费和材料成本费用。
            <br />
            <h4>第七条 合同的修改</h4>
            任何对本合同条款的变更、修改均须双方签订书面的修改书。变更后的内容与本合同(被修改部分除外)具有同等法律效力。
            <h4> 第八条 违约责任</h4>
            在合同履行期间，乙方延期交货、甲方延期付款，除双方协商同意免责外，均按未交付/未支付本合同价款日的xx%承担违约责任
            <br />
            <h4>第九条 争端的解决</h4>
            合同实施或与合同有关的一切争端应通过双方友好协商解决。如果友好协商不能解决，各方均可向有管辖权的人民法院起诉。
            <br />
            <h4>第十条 合同生效及其它</h4>
            1.本合同应在双方授权代表签字、单位盖章、预付款到达乙方指定账户生效。
            <br />
            2.本合同正本一式四份，双方各持两份，具有同等法律效力。
            <br />
            3.合同如有未尽事宜，须经双方共同协商后作出补充规定，补充规定与本合同具有同等效力。
            <div class="signature">
              <ul>
                <span class="mySignet" id="view_FQX"></span>
                <li>甲方：(盖章)<el-button text :icon="useRenderIcon(EStamp)" title="盖章" @click="Signet"
                    v-if="!isSeal"></el-button></li>
                <li>法定代表人：***</li>
                <li>签约日期：{{ contract.contractDate }}</li>
              </ul>
              <ul>
                <li>乙方：(盖章)</li>
                <li>法定代表人：***</li>
                <li>签约日期：{{ contract.contractDate }}</li>
              </ul>
            </div>
          </div>
        </el-scrollbar>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button class="ml-3" type="primary" @click="addCase()">确定</el-button>
          <el-button class="ml-3" @click="ClosePanelVisible()">取消</el-button>
        </span>
      </template>
    </ReDialog>

    <!-- 详情 -->
    <ReDialog :width="1000" :height="500" :models="showDialog" @Closes="closeShowDialog()">
      <template #main>
        <el-scrollbar height="420px">
          <p>购销合同：<span class="underline-text">{{ showContract.contractNumber }}</span></p>
          <h2 style="text-align: center;">
            {{ showContract.purchaseOrderId }}
            购销合同
          </h2>
          <div class="contract">
            <div>
              <p> 甲方：<span class="underline-text">{{ showContract.enterpriseName }}</span> </p>
              <p> 乙方：<span class="underline-text">{{ showContract.supplierName }}</span> </p>
              <p> 本合同于 <span class="underline-text">{{ showContract.year }}</span>年 <span class="underline-text">{{
                showContract.month }}</span>月
                <span class="underline-text">{{ showContract.day }}</span>日，由 (以下简称甲方)和 (以下简称乙方)，在经过友好协商后签订，双方共同遵守执行。
              </p>
            </div>
            <br />
            <h4> 第一条 乙方所提供的产品及费用清单</h4>
            <table style="margin-bottom: 20px;text-align: center;">
              <tr>
                <th style="width:150px">序号</th>
                <th style="width:150px">物品名称</th>
                <th style="width:100px">单位</th>
                <th style="width:200px">数量</th>
                <th style="width:150px">单价（元/件）</th>
                <th style="width:150px">金额（元）</th>
              </tr>
              <tbody>
                <tr v-for="(item, index) in showContract.infoList">
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.ProductName }}</td>
                  <td>个</td>
                  <td>
                    {{ item.Quantity }}
                  </td>
                  <td>{{ item.Price }}</td>
                  <td>{{ item.total }}</td>
                </tr>
                <tr>
                  <td>合计（元）</td>
                  <td colspan="5">
                    {{ showContract.totalMoney }}
                  </td>
                </tr>
                <tr>
                  <td>总金额（大写）</td>
                  <td colspan="5">
                    {{ showContract.totalText }}
                  </td>
                </tr>
              <!-- <tr>
                <td>说明</td>
                <td colspan="5">
                  <el-input placeholder="说明" show-word-limit type="textarea" />
                </td>
                                                                              </tr> -->
              </tbody>
            </table>
            <br />
            <h4> 第二条 包装：由乙方按国家标准进行包装。任何因包装不善所致之损失均由乙方负责。</h4>
            本合同项下具体的合同标的、数量、价格、付款方式、交付日期等交易内容由双方通过采购订单或买卖（销售、采购）合同等方式确定。
            <br />
            <h4> 第三条 交货日期：<span class="underline-text">{{ showContract.deliveryDate }}</span></h4>
            <h4> 第四条 交货地点和方式</h4>
            1.交货地点：<span class="underline-text">{{ showContract.deliveryAdree }}</span>
            <br />
            2.交货方式：乙方将货物运至甲方指定的目的地。乙方负责办理货物运至甲方指定的目的地，包括保险和储存在内的一切事项，有关费用已包括在合同总价中。
            <br />
            <h4>第五条 付款方式</h4>
            1.支付方式：<span class="underline-text">{{ showContract.payMethod }}</span>
            <br />
            2、付款约定：<span class="underline-text">{{ showContract.payAgreement
            }}</span>。甲方对乙方所提供的产品验收合格且完成支付后，乙方出具合同总价的全额销售发票。
            <br />
            <h4> 第六条 质量保证和售后服务</h4>
            1.乙方承诺所提供甲方的产品质量具有可追溯性，产品质量保证期为30天，自交付之日起计算。
            <br />
            2.在产品质量保证期内，如出现产品质量问题，甲方有权随时要求乙方免费维修或更换;如属甲方人员使用不当不能正常使用，乙方也应及时提供维修服务，但甲方应承担乙方人员的差旅费和材料成本费用。
            <br />
            <h4>第七条 合同的修改</h4>
            任何对本合同条款的变更、修改均须双方签订书面的修改书。变更后的内容与本合同(被修改部分除外)具有同等法律效力。
            <h4> 第八条 违约责任</h4>
            在合同履行期间，乙方延期交货、甲方延期付款，除双方协商同意免责外，均按未交付/未支付本合同价款日的xx%承担违约责任
            <br />
            <h4>第九条 争端的解决</h4>
            合同实施或与合同有关的一切争端应通过双方友好协商解决。如果友好协商不能解决，各方均可向有管辖权的人民法院起诉。
            <br />
            <h4>第十条 合同生效及其它</h4>
            1.本合同应在双方授权代表签字、单位盖章、预付款到达乙方指定账户生效。
            <br />
            2.本合同正本一式四份，双方各持两份，具有同等法律效力。
            <br />
            3.合同如有未尽事宜，须经双方共同协商后作出补充规定，补充规定与本合同具有同等效力。
            <div class="signature">
              <ul>
                <span class="mySignet" id="view_FQXSHOW1"></span>
                <li>甲方：(盖章)</li>
                <li>法定代表人：***</li>
                <li>签约日期：{{ showContract.contractDate }}</li>
              </ul>
              <ul>
                <span class="mySignet" id="view_FQXSHOW2"></span>
                <li>乙方：(盖章) </li>
                <li>法定代表人：***</li>
                <li>签约日期：{{ showContract.contractDate }}</li>
              </ul>
            </div>
          </div>
        </el-scrollbar>
      </template>
    </ReDialog>
  </div>
</template>
<script setup lang='ts'>
import { PureTableBar } from "@/components/RePureTableBar";
import { ref } from "vue";
import { useSupplierWarehouse } from "./hooks/EBusinessContract";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import EStamp from "@iconify-icons/ep/stamp";
const {
  isSeal,
  columns,
  Vdialog,
  dataList,
  loading,
  contract,
  pagination,
  handleSizeChange,
  handleCurrentChange,
  ClickVdialog,
  ContractNumber,
  ClosePanelVisible,
  addCase,
  Signet,
  showDetail,
  orderList,
  changeOrder,
  showDialog,
  closeShowDialog,
  showContract,
  handleInput,
} = useSupplierWarehouse()
</script>
<style scoped lang="scss">
@import url("@/style/CreditComm.scss");
$haed-hight: 50px;


.haed_btn {
  width: 100%;
  height: $haed-hight;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px;
  border-bottom: 1px solid #e7e7e7;
}

:deep(.el-dialog__footer) {
  text-align: center;
}


.signature {
  width: 100%;
  display: flex;

  ul {
    width: 40%;
    text-align: left;
    position: relative;
  }
}

.mySignet {
  position: absolute;
  width: 130px;
  height: 130px;
  left: 13%;
  top: 20%;
}

.font600 {
  font-weight: 600;
}

p {
  text-align: left;
  margin: 10px 0;
}

h4 {
  margin: 10px 0;
}

.contract {
  text-align: left;
  font-size: 16px;
  width: 80%;
  margin: 0 auto;

  .contract_one {
    p {
      margin: 10px 0;
    }

    width: 80%;
    margin: 0 auto;
  }

  table,
  th,
  td {
    border: 1px solid black;
    border-collapse: collapse;
  }

  .contract_tow {
    width: 80%;
    margin: 0 auto;

    .contract_tow_ti {
      text-align: center;
    }

    p {
      margin: 10px 0;
    }
  }
}

.underline-text {
  text-decoration: underline;
}
</style>
